/* Estilos del layout admin compartido (AdminSharedLayout).
Viven en la RCL, con el componente que los usa, para que cualquier vertical que consuma
SharedAdmin los reciba servidos. Antes estaban solo en el app.css del portal Comercial, así
que el mismo layout se veía roto en los demás portales: el drawer se dibujaba apilado bajo el
contenido en vez de fijo a la izquierda.
Se referencia con:
ANYELA XIOMARA VENEGAS
anyela@correo.com
*/
.jfg-celda {
display: flex;
flex-direction: column;
line-height: 1.25;
gap: 1px;
}
/* Números alineados a la derecha: la coma decimal cae en la misma vertical y se comparan de un
vistazo. Sin esto, dos montos de distinto largo obligan a leerlos cifra por cifra. */
.jfg-celda--der { align-items: flex-end; text-align: right; }
.jfg-celda__ppal { font-weight: 600; }
.jfg-celda__sec {
font-size: var(--jgf-font-size-sm, 11px);
color: var(--mud-palette-text-secondary);
}
/* Tabular: cada dígito ocupa lo mismo, así las columnas de cédulas y montos quedan a plomo. */
.jfg-celda__mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* Debe plata: se marca el monto, no la fila entera — una fila roja se lee como error. */
.jfg-celda__debe { color: var(--mud-palette-error); }
/* Guion de "sin dato": presente pero que no compita con lo que sí hay. */
.jfg-celda__vacio { color: var(--mud-palette-text-disabled); }
/* Correo y teléfono clickeables: subrayado solo al pasar, para no ensuciar la tabla. */
.jfg-celda__link { color: inherit; text-decoration: none; }
.jfg-celda__link:hover { color: var(--jgf-primary); text-decoration: underline; }
/* ══ Devolución de una venta (DevolucionDialog, POS comercial y restaurante) ═══════════════════
Arriba el comprobante y el cliente (qué se devuelve y a quién le llega la NC); abajo los
artículos como filas con − / + y el total a devolver bien grande. */
.dev-titulo { display: flex; align-items: center; gap: 10px; }
.dev-titulo .mud-icon-root { color: var(--mud-palette-primary); font-size: 1.6rem; }
.dev-titulo span { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.dev-titulo small { display: block; font-size: .8rem; color: var(--mud-palette-text-secondary); font-family: ui-monospace, Menlo, monospace; }
.dev-cabecera { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .dev-cabecera { grid-template-columns: minmax(0, 1fr); } }
.dev-tarjeta {
padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray, #f8fafc);
}
.dev-tarjeta__h {
display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.dev-tarjeta__principal { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; overflow-wrap: anywhere; }
.dev-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
.dev-datos > div { min-width: 0; }
.dev-datos dt { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.dev-datos dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.dev-datos--ancho { grid-column: 1 / -1; }
.dev-datos--resultado { margin-top: 12px; }
.dev-mono, .dev-clave { font-family: ui-monospace, Menlo, monospace; font-size: .8rem !important; }
.dev-monto { font-variant-numeric: tabular-nums; }
.dev-pago {
display: inline-block; margin: 0 6px 2px 0; padding: 1px 8px; border-radius: 999px;
background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); font-size: .78rem;
}
.dev-seccion { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.dev-h { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.dev-lineas { display: flex; flex-direction: column; gap: 6px; }
.dev-linea {
display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; align-items: center; gap: 12px;
padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--mud-palette-lines-default);
transition: border-color .15s, background .15s;
}
.dev-linea--on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.dev-linea--agotada { opacity: .6; }
.dev-linea__prod { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dev-linea__prod strong { font-size: .95rem; overflow-wrap: anywhere; }
.dev-linea__prod span { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.dev-linea__cant { display: flex; align-items: center; gap: 2px; }
.dev-linea__input { width: 72px; }
.dev-linea__input input { text-align: center; font-weight: 700; }
.dev-linea__de { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-left: 4px; white-space: nowrap; }
.dev-linea__monto { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.dev-linea__agotada { grid-column: 2 / -1; text-align: right; font-size: .8rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) {
.dev-linea { grid-template-columns: minmax(0, 1fr) auto; }
.dev-linea__monto { grid-column: 1 / -1; }
}
.dev-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
/* Lista de un toque editable en el lugar (motivos de devolución): como las notas rápidas del salón. */
.chips-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chips-ed--editando { padding: 8px; border: 1px dashed var(--mud-palette-lines-default); border-radius: 10px; }
.chips-ed__editar {
display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 0; border-radius: 999px;
background: transparent; color: var(--mud-palette-primary); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.chips-ed__editar:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.chips-ed__form { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.chips-ed__form .mud-input-control { margin: 0; flex: 1; }
.chips-ed__acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dev-chip {
padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
background: var(--mud-palette-surface); border: 1.5px solid #cbd5e1; color: var(--mud-palette-text-primary);
}
.dev-chip:hover { border-color: var(--mud-palette-primary); }
/* Elegido: el mismo chip blanco con borde negro (pedido del usuario, 23/10). Con fondo de color la letra
se lavaba en los monitores de caja: blanco sobre el verde de la marca da 2,5:1 de contraste. La
sombra engrosa el borde sin mover el chip. */
.dev-chip--on, .dev-chip--on:hover {
background: var(--mud-palette-surface); border-color: var(--mud-palette-text-primary);
box-shadow: 0 0 0 1px var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); font-weight: 700;
}
.dev-medios { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dev-medio {
display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
text-align: left; padding: 10px 14px; border-radius: 12px; cursor: pointer; font: inherit;
background: var(--mud-palette-surface); border: 1.5px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary);
}
.dev-medio .mud-icon-root { grid-row: 1 / 3; color: var(--mud-palette-text-secondary); }
.dev-medio span { font-weight: 700; font-size: .9rem; }
.dev-medio small { font-size: .74rem; color: var(--mud-palette-text-secondary); }
.dev-medio--on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.dev-medio--on .mud-icon-root { color: var(--mud-palette-primary); }
.dev-total {
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
padding: 12px 16px; border-radius: 12px; color: #fff;
background: linear-gradient(120deg, #0b3b4a 0%, #065f46 55%, #10b981 100%);
}
.dev-total > div:first-child { display: flex; flex-direction: column; }
.dev-total > div:first-child span { font-weight: 700; }
.dev-total small { opacity: .8; font-size: .78rem; }
.dev-total__monto { display: flex; flex-direction: column; align-items: flex-end; }
.dev-total__monto span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.dev-total__monto strong { font-size: 1.8rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dev-hecha { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 0; }
/* ══ Reenviar un comprobante por correo (ReenviarCorreoDialog) ═══════════════════════════ */
.rc-titulo { display: flex; align-items: center; gap: 10px; }
.rc-titulo .mud-icon-root { color: var(--mud-palette-primary); font-size: 1.6rem; }
.rc-titulo span { display: block; font-weight: 800; font-size: 1.1rem; line-height: 1.1; }
.rc-titulo small { display: block; font-size: .8rem; color: var(--mud-palette-text-secondary); font-family: ui-monospace, Menlo, monospace; }
.rc-h { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: var(--mud-palette-text-secondary); margin-bottom: 6px; }
.rc-receptor {
display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 4px; border-radius: 12px; cursor: pointer;
border: 1.5px solid var(--mud-palette-lines-default); transition: border-color .15s, background .15s;
}
.rc-receptor--on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.rc-receptor > div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rc-receptor strong { overflow-wrap: anywhere; }
.rc-receptor span { font-size: .78rem; color: var(--mud-palette-text-secondary); }
/* Lápiz para corregir el correo (la factura rebotó): a la derecha de la fila. */
.rc-receptor > div:not(.mud-tooltip-root) { flex: 1 1 auto; }
.rc-receptor .mud-tooltip-root { flex: 0 0 auto; margin-left: auto; }
.rc-receptor .rc-corregido { color: #b45309; font-weight: 600; }
.rc-editar { display: flex; align-items: center; gap: 6px; }
.rc-editar .mud-input-control { flex: 1 1 auto; margin: 0; }
.rc-rebotado { text-decoration: line-through; overflow-wrap: anywhere; }
/* «Enviar» con el correo corregido sin guardar: el ✓ late para que se vea qué falta tocar. */
.rc-guardar--pendiente { animation: rc-pulso 1s ease-out 4; outline: 2px solid var(--jfg-accent-strong, #047857); outline-offset: 2px; }
@keyframes rc-pulso {
0% { box-shadow: 0 0 0 0 rgba(4, 120, 87, .55); }
70% { box-shadow: 0 0 0 12px rgba(4, 120, 87, 0); }
100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0); }
}
.rc-nota { margin-top: 4px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-chips:empty { display: none; }
.rc-adjuntos { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
/* ══ Corregir el cliente de una factura rechazada (CorregirClienteFeDialog) ═══════════════ */
.cfe-ident { display: flex; align-items: center; gap: 8px; }
.cfe-ident b { font-family: ui-monospace, Menlo, monospace; letter-spacing: .3px; }
.cfe-hacienda { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px;
font-size: .8rem; color: var(--mud-palette-text-secondary); }
.cfe-actividades { display: flex; flex-direction: column; gap: 6px; }
.cfe-act { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left;
border: 1.5px solid var(--mud-palette-lines-default); border-radius: 12px; cursor: pointer;
background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit;
transition: border-color .15s, background .15s; }
.cfe-act:hover { border-color: var(--mud-palette-primary); }
.cfe-act--on { border-color: var(--mud-palette-primary);
background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }
.cfe-act b { min-width: 58px; font-family: ui-monospace, Menlo, monospace; }
.cfe-act span { flex: 1 1 auto; min-width: 0; }
.cfe-act em { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--mud-palette-primary); }
/* Ficha de cliente: bloque de exoneración de IVA. */
.cli-exo {
margin-top: 14px;
padding: 10px 14px 12px;
border: 1px solid var(--jfg-border, #e2e8f0);
border-radius: 12px;
background: var(--jfg-surface-2, #f8fafc);
}
/* ══ Cierre de caja con el estilo del restaurante (CajaPanel Elegante) ═══════════
Banner azul noche con luces cálidas, tarjetas blancas con íconos en casillas pastel y dos
columnas: el arqueo a la izquierda, los demás medios y la acción a la derecha. */
.cierre-r { --cr-navy: #0f1d33; --cr-navy-2: #1b2f4f; --cr-oro: #f5c77e; --cr-borde: #e6e9ef;
--cr-suave: #f6f8fb; --cr-texto: #1f2937; --cr-sub: #6b7280; color: var(--cr-texto); }
.cierre-r__banner {
position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 16px 22px; margin-bottom: 14px; border-radius: 18px; overflow: hidden; color: #fff;
/* Luces cálidas desenfocadas (bokeh) hacia la derecha, lejos del título: evocan un salón de noche. */
background:
radial-gradient(circle at 58% 28%, rgba(255, 210, 140, .30), transparent 46px),
radial-gradient(circle at 66% 78%, rgba(255, 200, 120, .22), transparent 38px),
radial-gradient(circle at 74% 38%, rgba(255, 220, 160, .26), transparent 60px),
radial-gradient(circle at 83% 70%, rgba(255, 190, 110, .20), transparent 52px),
radial-gradient(circle at 92% 22%, rgba(255, 215, 150, .24), transparent 44px),
radial-gradient(ellipse at 80% 50%, rgba(245, 199, 126, .22), transparent 60%),
radial-gradient(ellipse at 15% 70%, rgba(59, 130, 246, .16), transparent 55%),
linear-gradient(115deg, var(--cr-navy) 0%, var(--cr-navy-2) 55%, #3a2a1c 100%);
box-shadow: 0 10px 30px -12px rgba(15, 29, 51, .55);
}
.cierre-r__banner-icono {
display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
}
.cierre-r__banner-icono .mud-icon-root { font-size: 1.7rem; color: #fff; }
.cierre-r__banner-textos h1 {
margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em;
}
.cierre-r__banner-textos p { margin: 2px 0 0; color: rgba(255, 255, 255, .8); font-size: .95rem; }
.cierre-r__banner-der { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cierre-r__chip {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
font: inherit; font-size: .88rem; font-weight: 600;
}
.cierre-r__chip--btn { cursor: pointer; }
.cierre-r__chip--btn:hover { background: rgba(255, 255, 255, .18); }
.cierre-r__estado {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
background: #16a34a; color: #fff; font-size: .82rem; font-weight: 700;
}
.cierre-r__estado span { width: 8px; height: 8px; border-radius: 50%; background: #bbf7d0; }
.cierre-r__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
/* En pantalla ancha la columna derecha (medios + botones) acompaña al bajar: «Confirmar» siempre a la vista. */
@media (min-width: 1101px) { .cierre-r__lateral { position: sticky; top: 12px; align-self: start; } }
@media (max-width: 1100px) { .cierre-r__grid { grid-template-columns: minmax(0, 1fr); } }
.cierre-r__card {
background: #fff; border: 1px solid var(--cr-borde); border-radius: 16px; padding: 14px 18px;
margin-bottom: 14px; box-shadow: 0 2px 10px -6px rgba(15, 23, 42, .18);
}
.cierre-r__card h2 {
display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--cr-texto);
}
.cierre-r__card h2 .mud-icon-root { color: var(--cr-navy-2); }
.cierre-r__card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cierre-r__sub { margin: -4px 0 8px; color: var(--cr-sub); font-size: .82rem; }
.cierre-r__nota { margin: 10px 0 0; color: var(--cr-sub); font-size: .82rem; }
.cierre-r__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .cierre-r__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cierre-r__tiles { grid-template-columns: minmax(0, 1fr); } }
.cierre-r__tile {
display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;
border: 1px solid var(--cr-borde); background: var(--tile-bg); min-width: 0;
}
.cierre-r__tile > div { display: flex; flex-direction: column; min-width: 0; }
.cierre-r__tile-icono {
flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
background: var(--tile-icono-bg); color: var(--tile-icono);
}
.cierre-r__tile-lbl { font-size: .82rem; font-weight: 700; color: var(--tile-icono); }
.cierre-r__tile-monto { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cierre-r__tile-sub { font-size: .75rem; color: var(--cr-sub); }
.cierre-r__tile--verde { --tile-bg: #f0fdf4; --tile-icono-bg: #dcfce7; --tile-icono: #15803d; }
.cierre-r__tile--azul { --tile-bg: #eff6ff; --tile-icono-bg: #dbeafe; --tile-icono: #1d4ed8; }
.cierre-r__tile--lila { --tile-bg: #faf5ff; --tile-icono-bg: #ede9fe; --tile-icono: #7c3aed; }
.cierre-r__tile--ambar { --tile-bg: #fffbeb; --tile-icono-bg: #fef3c7; --tile-icono: #b45309; }
/* Tarjeta de impuestos: dos montos (IVA y 10 %) en vez de uno. */
.cierre-r__tile-par { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .85rem; color: var(--cr-sub); }
.cierre-r__tile-par b { font-size: 1.05rem; font-weight: 800; color: var(--cr-texto, #0f172a); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Montos grandes (₡2,555,195.33) no se salen de la tarjeta: el bloque de texto ocupa el resto y la letra
baja con el ancho; la etiqueta se corta con «…» antes que empujar el monto afuera. */
.cierre-r__tile > div { flex: 1 1 auto; }
.cierre-r__tile-monto { font-size: clamp(1rem, 1.25vw, 1.35rem); }
.cierre-r__tile-par { gap: 6px; min-width: 0; }
.cierre-r__tile-par > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cierre-r__tile-par b { flex: 0 0 auto; font-size: clamp(.82rem, .95vw, 1.05rem); }
.cierre-r__tabla { border: 1px solid var(--cr-borde); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.cierre-r__tabla-cab, .cierre-r__fila {
display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 150px; align-items: center; gap: 10px;
padding: 7px 14px;
}
.cierre-r__tabla-cab {
grid-template-columns: minmax(0, 1fr) 80px 150px; background: var(--cr-suave);
color: var(--cr-sub); font-size: .78rem; font-weight: 700;
}
.cierre-r__tabla-cab span:nth-child(2) { text-align: center; }
.cierre-r__tabla-cab span:last-child { text-align: right; }
.cierre-r__fila + .cierre-r__fila { border-top: 1px solid var(--cr-borde); }
.cierre-r__fila--fuerte .cierre-r__concepto, .cierre-r__fila--fuerte .cierre-r__monto { font-weight: 800; }
.cierre-r__fila--declarado { grid-template-columns: 36px minmax(0, 1fr) 170px auto; background: #f5f9ff; }
.cierre-r__cant { text-align: center; color: var(--cr-sub); font-size: .88rem; }
.cierre-r__concepto { font-size: .92rem; }
.cierre-r__monto { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cierre-r__monto--neg { color: #dc2626; }
.cierre-r__input { margin: 0 !important; }
/* ── Campos que digita el cajero: amarillos y numerados, para que no haya duda de dónde se escribe.
Al digitarlos pasan a verde suave. «Por digitar» mientras no se tocan (arrancan en 0). ── */
.cierre-r__digitar { background: #fffbeb !important; box-shadow: inset 4px 0 0 #f59e0b; }
.cierre-r__digitar .mud-input-outlined-border { border: 2px solid #f59e0b !important; }
.cierre-r__digitar .mud-input-root input { font-weight: 800; font-size: 1.05rem; }
.cierre-r__digitar--ok { background: #f0fdf4 !important; box-shadow: inset 4px 0 0 #16a34a; }
.cierre-r__digitar--ok .mud-input-outlined-border { border-color: #16a34a !important; }
.cierre-r__paso {
flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
background: #f59e0b; color: #fff; font-weight: 800; font-size: .9rem;
}
.cierre-r__digitar--ok .cierre-r__paso { background: #16a34a; }
.cierre-r__medio-decl.cierre-r__digitar { margin-left: 0; padding: 6px 8px; border-radius: 10px; }
.cierre-r__pill--pend { background: #fef3c7; color: #b45309; }
.cierre-r__aviso {
display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; margin: -2px 0 8px; padding: 6px 10px; border-radius: 10px;
background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .82rem;
}
.cierre-r__icono {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: var(--ic-bg); color: var(--ic);
}
.cierre-r__icono--verde { --ic-bg: #dcfce7; --ic: #15803d; }
.cierre-r__icono--azul { --ic-bg: #dbeafe; --ic: #1d4ed8; }
.cierre-r__icono--rojo { --ic-bg: #fee2e2; --ic: #dc2626; }
.cierre-r__icono--gris { --ic-bg: #f1f5f9; --ic: #475569; }
.cierre-r__pill {
display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 999px;
font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.cierre-r__pill--ok { background: #dcfce7; color: #15803d; }
.cierre-r__pill--mas { background: #ffedd5; color: #c2410c; }
.cierre-r__pill--menos { background: #fee2e2; color: #dc2626; }
.cierre-r__consumo, .cierre-r__total {
display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0;
}
.cierre-r__consumo + .cierre-r__consumo { border-top: 1px dashed var(--cr-borde); }
.cierre-r__consumo > div, .cierre-r__total > div { display: flex; flex-direction: column; }
.cierre-r__consumo > div span, .cierre-r__total > div span { color: var(--cr-sub); font-size: .78rem; }
.cierre-r__consumo > .cierre-r__monto { font-size: 1rem; }
.cierre-r__total {
margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: #eef4ff; border: 1px solid #dbe6ff;
}
/* Diferencia general (efectivo + los demás medios): lo que de verdad sobra o falta en el cierre. */
.cierre-r__general-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cierre-r__general-cab b { font-size: 1rem; }
.cierre-r__general-cab .cierre-r__pill { font-size: .92rem; padding: 6px 14px; }
.cierre-r__general-fila { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--cr-sub); font-size: .85rem; }
.cierre-r__general-fila span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cr-texto, inherit); }
.cierre-r__medio { padding: 7px 0; }
.cierre-r__medio + .cierre-r__medio { border-top: 1px solid var(--cr-borde); }
.cierre-r__medio-cab { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cierre-r__medio-decl { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 46px; flex-wrap: wrap; }
.cierre-r__medio-decl .mud-input-control { flex: 1 1 120px; margin: 0; }
/* Consumo interno en columnas: destino, cantidad, base, IVA, 10 % y total; última fila = totales. */
.cierre-r__tabla--consumo .cierre-r__tabla-cab,
.cierre-r__tabla--consumo .cierre-r__fila {
grid-template-columns: minmax(0, 1.6fr) 56px repeat(4, minmax(0, 1fr));
}
.cierre-r__tabla--consumo .cierre-r__tabla-cab span:nth-child(n+3) { text-align: right; }
.cierre-r__tabla--consumo .cierre-r__monto { font-weight: 600; }
.cierre-r__tabla--consumo .cierre-r__monto--total { font-weight: 800; }
.cierre-r__fila--suma { background: #eef4ff; border-top: 1px solid #dbe6ff !important; }
.cierre-r__fila--suma .cierre-r__concepto, .cierre-r__fila--suma .cierre-r__monto { font-weight: 800; }
@media (max-width: 760px) {
/* En el teléfono cada destino es una tarjetita: nombre arriba y los 4 montos con su etiqueta. */
.cierre-r__tabla--consumo .cierre-r__tabla-cab { display: none; }
.cierre-r__tabla--consumo .cierre-r__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
.cierre-r__tabla--consumo .cierre-r__concepto { grid-column: 1 / -1; font-weight: 700; }
.cierre-r__tabla--consumo .cierre-r__cant { display: none; }
.cierre-r__tabla--consumo .cierre-r__monto { display: flex; justify-content: space-between; gap: 6px; }
.cierre-r__tabla--consumo .cierre-r__monto::before { content: attr(data-lbl); color: var(--cr-sub); font-weight: 500; }
}
.cierre-r__info { margin: 0; }
.cierre-r__info > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; }
.cierre-r__info > div + div { border-top: 1px solid var(--cr-borde); }
.cierre-r__info dt { display: inline-flex; align-items: center; gap: 8px; color: var(--cr-sub); font-size: .88rem; }
.cierre-r__info dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; }
/* Información del cierre: una franja de 4 datos (columna izquierda) en vez de una lista. */
.cierre-r__card--info .cierre-r__info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cierre-r__card--info .cierre-r__info > div { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 0; min-width: 0; }
.cierre-r__card--info .cierre-r__info > div + div { border-top: 0; border-left: 1px solid var(--cr-borde); padding-left: 12px; }
.cierre-r__card--info .cierre-r__info dd { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
.cierre-r__card--info .cierre-r__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cierre-r__card--info .cierre-r__info > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.cierre-r__acciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.cierre-r__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px;
border-radius: 12px; font: inherit; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
text-transform: uppercase; cursor: pointer; transition: filter .15s ease, background .15s ease;
}
.cierre-r__btn--sec { background: #fff; border: 1.5px solid #cbd5e1; color: var(--cr-texto); }
.cierre-r__btn--sec:hover { background: var(--cr-suave); }
.cierre-r__btn--pri { background: #16a34a; border: 1.5px solid #16a34a; color: #fff; box-shadow: 0 6px 16px -8px #16a34a; }
.cierre-r__btn--pri:hover { filter: brightness(1.06); }
.cierre-r__btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) {
.cierre-r__banner { padding: 18px; }
.cierre-r__banner-textos h1 { font-size: 1.5rem; }
.cierre-r__banner-der { margin-left: 0; }
.cierre-r__fila, .cierre-r__fila--declarado { grid-template-columns: 32px minmax(0, 1fr) auto; }
.cierre-r__fila .cierre-r__cant { display: none; }
.cierre-r__tabla-cab { display: none; }
.cierre-r__fila--declarado { grid-template-columns: 32px minmax(0, 1fr); }
.cierre-r__fila--declarado .cierre-r__input { grid-column: 2 / -1; }
.cierre-r__fila--declarado .cierre-r__pill { grid-column: 2 / -1; justify-self: start; }
.cierre-r__acciones { grid-template-columns: minmax(0, 1fr); }
}
/* Botón final de un formulario con «Enter avanza» (cierre de caja, entradas/salidas): con el foco
late, como el «Cobrar» del salón; el cajero ve dónde está parado y que Enter lo aprieta. */
.jfg-latido:focus-visible, .jfg-latido:focus { outline: 3px solid #fbbf24; outline-offset: 3px; animation: jfg-latido 1.1s ease-in-out infinite; }
@keyframes jfg-latido {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.65); transform: scale(1); }
50% { box-shadow: 0 0 0 12px rgba(16,185,129,0); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .jfg-latido:focus { animation: none; } }
/* Devolución: el error va en la barra de botones (siempre visible), no al final del contenido. */
.mud-dialog-actions:has(.dev-error-acciones) { flex-wrap: wrap; gap: 8px; }
.dev-error-acciones { flex: 1 1 280px; margin: 0 auto 0 0 !important; }
@media (max-width: 600px) { .dev-error-acciones { flex-basis: 100%; } }
/* ══ Cierre de caja en monitor bajo (≤ 820 px de alto) ═══════════════════════════════
La cajera de Sabor Porteño tiene un monitor chico: banner, tarjetas y filas más bajos para que los
campos a digitar y «Confirmar cierre» entren sin tanto scroll. En monitores normales no cambia. */
@media (min-width: 761px) and (max-height: 820px) {
.cierre-r__banner { padding: 8px 14px; margin-bottom: 8px; gap: 10px; border-radius: 12px; }
.cierre-r__banner-icono { width: 36px; height: 36px; border-radius: 10px; }
.cierre-r__banner-icono .mud-icon-root { font-size: 1.2rem; }
.cierre-r__banner-textos h1 { font-size: 1.2rem; }
.cierre-r__banner-textos p { display: none; }
.cierre-r__chip { padding: 4px 10px; font-size: .8rem; }
.cierre-r__estado { padding: 3px 10px; font-size: .75rem; }
.cierre-r__grid { gap: 10px; }
.cierre-r__card { padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; }
.cierre-r__card h2 { margin: 0 0 6px; font-size: .95rem; }
.cierre-r__sub { display: none; }
.cierre-r__tiles { gap: 8px; }
.cierre-r__tile { padding: 5px 10px; gap: 8px; border-radius: 10px; }
.cierre-r__tile-icono { width: 30px; height: 30px; }
.cierre-r__tile-icono .mud-icon-root { font-size: 1.1rem; }
.cierre-r__tile-lbl { font-size: .74rem; }
.cierre-r__tile-monto { font-size: clamp(.95rem, 1.1vw, 1.1rem); }
.cierre-r__tile-sub { display: none; }
.cierre-r__tile-par { font-size: .76rem; }
.cierre-r__tile-par b { font-size: clamp(.78rem, .85vw, .9rem); }
.cierre-r__tabla { margin-bottom: 8px; }
.cierre-r__tabla-cab, .cierre-r__fila { padding: 3px 12px; }
.cierre-r__fila .cierre-r__icono { width: 26px; height: 26px; }
.cierre-r__concepto { font-size: .86rem; }
.cierre-r__fila--declarado { padding: 5px 12px; }
.cierre-r__medio { padding: 4px 0; }
.cierre-r__medio-decl { margin-top: 3px; }
.cierre-r__total { margin-top: 4px; padding: 6px 12px; }
.cierre-r__btn { padding: 9px 14px; }
}
/* ══ Campanita de notificaciones (admin, POS y salón) ═════════════════════════════
Con avisos sin leer la campana se balancea cada tanto y el número va en rojo: tiene que verse
desde la caja sin buscarla. El panel: lo nuevo con una barra de color a la izquierda. */
.campanita-ancla { position: relative; display: inline-flex; }
.campanita { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; color: inherit; }
.campanita--abierta { background: rgba(255, 255, 255, .16); }
/* Capa invisible detrás del panel: tocar afuera lo cierra. */
.campanita-fondo { position: fixed; inset: 0; z-index: 1390; background: transparent; }
.mud-popover.campanita-pop { z-index: 1400 !important; margin-top: 6px; }
.campanita:hover { background: rgba(255, 255, 255, .12); }
.campanita .mud-icon-root { font-size: 1.45rem; }
.campanita--alerta .mud-icon-root { color: #fde68a; animation: campanita-balanceo 2.8s ease-in-out infinite; transform-origin: 50% 8%; }
.campanita__badge .mud-badge { font-weight: 800; }
@keyframes campanita-balanceo {
0%, 70%, 100% { transform: rotate(0); }
74% { transform: rotate(16deg); } 78% { transform: rotate(-14deg); }
82% { transform: rotate(10deg); } 86% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .campanita--alerta .mud-icon-root { animation: none; } }
.campanita-pop { border-radius: 14px !important; overflow: hidden; }
.campanita__panel { width: min(380px, calc(100vw - 24px)); }
.campanita__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
.campanita__cab strong { font-size: .95rem; }
.campanita__todas { border: 0; background: none; color: #059669; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.campanita__todas:hover { text-decoration: underline; }
.campanita__lista { max-height: min(60vh, 440px); overflow-y: auto; }
.campanita__vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 14px; color: #6b7280; font-size: .85rem; }
.campanita__item { display: flex; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid #f1f5f9;
background: #fff; text-align: left; font: inherit; cursor: pointer; box-shadow: inset 4px 0 0 transparent; }
.campanita__item:hover { background: #f8fafc; }
.campanita__item--nueva { background: #fffbeb; }
.campanita__item--nueva.campanita__item--error { background: #fef2f2; box-shadow: inset 4px 0 0 #dc2626; }
.campanita__item--nueva.campanita__item--aviso { box-shadow: inset 4px 0 0 #f59e0b; }
.campanita__item--nueva.campanita__item--info { background: #eff6ff; box-shadow: inset 4px 0 0 #3b82f6; }
.campanita__icono { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: #f1f5f9; color: #475569; }
.campanita__item--error .campanita__icono { background: #fee2e2; color: #dc2626; }
.campanita__item--aviso .campanita__icono { background: #fef3c7; color: #b45309; }
.campanita__item--info .campanita__icono { background: #dbeafe; color: #1d4ed8; }
.campanita__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campanita__texto strong { font-size: .86rem; color: #0f172a; }
.campanita__texto span { font-size: .8rem; color: #475569; line-height: 1.35; }
.campanita__texto em { font-style: normal; font-size: .7rem; color: #94a3b8; }
/* ── Detalle de factura (FacturaDetalle.razor) ─────────────────────────────── */
.fd { color: var(--mud-palette-text-primary); }
.fd-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
padding: 16px 18px; border-radius: 14px;
background: linear-gradient(135deg, #ecfdf5, #f8fafc); border: 1px solid #d1fae5;
}
.fd-head__tipo { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #047857; }
.fd-head__num { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; font-weight: 800; margin-top: 2px; }
.fd-head__sub { font-size: .85rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.fd-head__estado { text-align: right; }
.fd-head__total { font-size: 1.7rem; font-weight: 900; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fd-card {
padding: 14px 16px; border-radius: 14px; background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.fd-card--tabla { padding: 4px 6px; overflow-x: auto; }
.fd-card__tit {
display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.fd-strong { font-weight: 700; }
.fd-muted { color: var(--mud-palette-text-secondary); font-size: .88rem; }
.fd-xs { font-size: .75rem; font-family: ui-monospace, Consolas, monospace; }
.fd-error { color: var(--mud-palette-error); font-size: .88rem; }
.fd-tel { font-size: .88rem; color: var(--mud-palette-text-secondary); }
.fd-tel a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.fd-tel a:hover { text-decoration: underline; }
/* El correo rebotó: el teléfono es lo que hace falta para pedirle el bueno. */
.fd-tel--aviso { font-size: 1rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.fd-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fd-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.fd-total { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--mud-palette-text-primary); font-size: 1.1rem; font-weight: 900; }
.fd-obs { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #fffbeb; font-size: .88rem; }
.fd-clave { display: flex; align-items: center; gap: 6px; }
.fd-clave code { font-size: .9rem; word-break: break-all; background: var(--mud-palette-background-gray); padding: 6px 8px; border-radius: 8px; }
/* ══ Fotos del producto (FotoProducto y FotosProductoDialog) ═══════════════════════════════
Miniatura cuadrada en listas y renglones; sin foto (o si no carga) un recuadro punteado. La ficha
muestra la foto grande con miniaturas abajo y los datos al lado; en pantallas angostas, uno debajo del otro. */
.foto-prod {
width: var(--foto-tam, 40px); height: var(--foto-tam, 40px); flex: none; box-sizing: border-box;
border-radius: 8px; object-fit: cover; background: #f1f5f9; display: block;
}
.foto-prod--sin {
display: flex; align-items: center; justify-content: center; text-align: center;
border: 1px dashed #cbd5e1; background: #f8fafc; color: #64748b;
font-size: 10px; font-weight: 700; line-height: 1.1;
}
/* ══ Ficha del producto (ProductoFormDialog) ══════════════════════════════════════════════════
El número de las pestañas (códigos, precios) va al lado del nombre: el globo de MudBlazor flota por
encima del texto y la barra de pestañas, que recorta lo que sobresale, lo cortaba por arriba. */
.ficha-tabs .mud-tab-badge { display: inline-flex; align-items: center; }
.ficha-tabs .mud-tab-badge .mud-badge-wrapper { position: static; width: auto; height: auto; }
.ficha-tabs .mud-tab-badge .mud-badge { position: static; inset: auto; }
/* «Utilidad sobre»: dos tarjetas que se eligen con un clic, cada una con su monto y de dónde sale. */
.ficha-costos { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.ficha-costos__titulo { display: flex; flex-direction: column; justify-content: center; min-width: 150px; margin-right: 4px; }
.ficha-costos__titulo span { font-size: var(--jgf-font-size-md); font-weight: 700; color: #0f172a; }
.ficha-costos__titulo small { font-size: var(--jgf-font-size-sm); color: #64748b; }
.ficha-costo {
flex: 0 1 300px; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
font: inherit; text-align: left; color: #334155; cursor: pointer;
transition: border-color .15s, background-color .15s;
}
.ficha-costo:hover:not(:disabled) { border-color: #94a3b8; }
.ficha-costo:focus-visible { outline: 2px solid var(--jgf-primary); outline-offset: 1px; }
.ficha-costo:disabled { cursor: not-allowed; opacity: .55; }
.ficha-costo__marca { color: #94a3b8; flex: none; }
.ficha-costo--activo { border-color: var(--jgf-primary); background: rgba(var(--jgf-primary-rgb), .07); }
.ficha-costo--activo .ficha-costo__marca { color: var(--jgf-primary); }
.ficha-costo__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ficha-costo__txt > span { font-size: var(--jgf-font-size-md); white-space: nowrap; }
.ficha-costo__txt small {
font-size: var(--jgf-font-size-sm); color: #64748b;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-fotos { width: min(1040px, 96vw); }
.ficha-fotos__cuerpo { display: flex; flex-wrap: wrap; gap: 22px; outline: none; }
.ficha-fotos__galeria { flex: 3 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ficha-fotos__grande {
position: relative; display: flex; align-items: center; justify-content: center;
height: min(440px, 52vh); border-radius: 12px; background: #f1f5f9; overflow: hidden;
}
.ficha-fotos__grande img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ficha-fotos__sin { color: #64748b; font-weight: 600; }
.ficha-fotos__flecha {
position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 999px;
background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(15,23,42,.2); display: flex; align-items: center;
justify-content: center; cursor: pointer; color: #0f172a;
}
.ficha-fotos__flecha--izq { left: 10px; }
.ficha-fotos__flecha--der { right: 10px; }
.ficha-fotos__tira { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-fotos__mini { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.ficha-fotos__mini--on { border-color: var(--mud-palette-primary, #10b981); }
.ficha-fotos__ayuda { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ficha-fotos__datos { flex: 2 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ficha-fotos__cod { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.ficha-fotos__nombre { font-size: 1.25rem; line-height: 1.3; font-weight: 800; }
/* Datos de la ficha (los que pasa quien la abre) y lo que hay en cada sucursal: etiqueta a la izquierda,
valor a la derecha, como en el mostrador. */
.ficha-fotos__dl { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
.ficha-fotos__dl > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--mud-palette-lines-default, #f1f5f9); }
.ficha-fotos__dl dt { color: var(--mud-palette-text-secondary); font-size: .88rem; }
.ficha-fotos__dl dd { margin: 0; font-weight: 700; text-align: right; }
.ficha-fotos__exist { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ficha-fotos__exist-tit { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.ficha-fotos__exist-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 5px; border-bottom: 1px solid var(--mud-palette-lines-default, #f1f5f9); font-size: .88rem; }
.ficha-fotos__exist-cant { font-weight: 700; }
.ficha-fotos__exist-cant--cero { color: var(--mud-palette-error, #dc2626); }
.ficha-fotos__exist-cant--bajo { color: var(--mud-palette-warning-darken, #b45309); }
/* ══ Catálogo de clientes (ClientesAdminPage y sus modales) ═══════════════════════════════════
Arriba los números (un clic filtra), luego los filtros plegables con «Más filtros», la tabla con
avatar, chips de condición y estado, el saldo en color (rojo vencido, ámbar pendiente) y la
paginación numerada. En teléfono la tabla pasa a una lista de dos líneas. */
.cli-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .cli-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Teléfono: dos por fila sin el ícono, para que la lista no quede debajo de cuatro tarjetas. */
@media (max-width: 520px) { .cli-kpis { gap: 8px; } .cli-kpi .jfg-kpi .jfg-kpi-ic { display: none; } }
/* El botón centra lo que lleva adentro: en flex, la tarjeta llena todo el botón. */
.cli-kpi {
display: flex; align-items: stretch;
padding: 0; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px;
background: var(--mud-palette-surface, #fff);
text-align: left; cursor: pointer; font: inherit; color: inherit; overflow: hidden;
transition: box-shadow .18s, border-color .18s;
}
.cli-kpi:hover { border-color: var(--jfg-border-2, #cbd5e1); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.cli-kpi:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* Bajas, para que la tabla muestre más filas: ícono más chico y la tendencia al lado del número
(si no cabe, baja a la línea siguiente). */
.cli-kpi > .mud-paper.pa-4 {
flex: 1 1 auto; width: 100%; min-width: 0; border: 0; border-radius: 0; padding: 10px 14px !important;
}
.cli-kpi .jfg-kpi { align-items: center; gap: 12px; }
.cli-kpi .jfg-kpi .jfg-kpi-ic { width: 36px; height: 36px; border-radius: 10px; }
.cli-kpi .jfg-kpi .jfg-kpi-ic .mud-icon-root { font-size: 1.2rem; }
.cli-kpi .jfg-kpi-body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.cli-kpi .jfg-kpi .jfg-kpi-lbl { flex-basis: 100%; }
.cli-kpi .jfg-kpi .jfg-kpi-val { font-size: 1.35rem; }
.cli-kpi .jfg-kpi .jfg-kpi-trend { margin-top: 0; white-space: nowrap; }
/* Dashboard: las mismas tarjetas, pero no filtran nada (el detalle de la comparación va al pasar el mouse). */
.cli-kpi.dash-kpi { cursor: default; }
.cli-kpi.dash-kpi:hover { border-color: var(--jfg-border, #e2e8f0); box-shadow: none; }
.cli-filtros { border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px; padding: 0 14px 8px; }
.cli-filtros__titulo {
display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 0; border: 0; background: none;
font: inherit; font-weight: 700; color: var(--mud-palette-text-primary); cursor: pointer; text-align: left;
}
.cli-filtros__cuenta {
min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--mud-palette-primary); color: #fff;
font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
}
.cli-filtros__fila {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 8px;
}
.cli-filtros__fila--primera { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.cli-filtros__fila, .cli-filtros__fila--primera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cli-filtros__fila--primera > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.cli-filtros__fila, .cli-filtros__fila--primera { grid-template-columns: minmax(0, 1fr); }
}
.cli-filtros__fecha { min-width: 0; }
.cli-filtros__pie {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 6px;
}
/* La etiqueta del saldo va en la misma línea que los radios: una fila menos. */
.cli-filtros__saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-width: 0; }
.cli-filtros__etiqueta { font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
/* MudBlazor envuelve cada radio en su propio contenedor: el aire va en el grupo, con gap. */
.cli-filtros__radios .mud-radio-group { display: flex; flex-wrap: wrap; gap: 0 18px; }
.cli-filtros__radios .mud-radio .mud-typography { margin-left: 2px; }
.cli-filtros__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cli-lista { border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px; overflow: hidden; }
.cli-tabla .mud-table-head .mud-table-cell { font-weight: 700; white-space: nowrap; }
.cli-tabla .mud-table-cell { vertical-align: middle; }
/* Lo que estiraba la fila eran los botones de acción (mínimo de 40 px para el dedo, en app.css).
Con mouse se achican y la fila mide lo que el texto; en pantalla táctil quedan del tamaño del dedo. */
@media (pointer: fine) {
.cli-tabla .mud-table-body .mud-icon-button { min-height: 0; padding: 4px; }
}
.cli-tabla .mud-table-body .mud-menu { display: inline-flex; vertical-align: middle; }
.cli-tabla .cli-avatar { width: 30px; height: 30px; font-size: .72rem; }
.cli-cliente { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cli-avatar {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.cli-avatar .mud-icon-root { color: #3730a3; }
.cli-avatar--grande { width: 48px; height: 48px; font-size: 1rem; }
.cli-tel { display: inline-flex; align-items: center; gap: 4px; }
.cli-tel .mud-icon-root { font-size: 1rem; color: var(--mud-palette-text-secondary); }
.cli-chip {
display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.5;
white-space: nowrap;
}
.cli-chip--contado { background: #dcfce7; color: #166534; }
.cli-chip--credito { background: #dbeafe; color: #1e40af; }
.cli-chip--activo { background: #dcfce7; color: #166534; }
.cli-chip--inactivo { background: #fee2e2; color: #991b1b; }
.cli-saldo { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cli-saldo--pendiente { color: #b45309; }
.cli-saldo--vencido { color: #dc2626; }
.cli-pie {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 16px; border-top: 1px solid var(--jfg-border, #e2e8f0);
font-size: .82rem; color: var(--mud-palette-text-secondary);
}
.cli-movil {
display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
border-bottom: 1px solid var(--jfg-border, #e2e8f0);
}
.cli-movil--inactivo { opacity: .6; }
.cli-movil__datos {
flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.cli-movil__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cli-movil__nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-movil__sub { font-size: .76rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Detalle del cliente: dos columnas de datos y, abajo a lo ancho, las últimas compras. */
.cli-detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 600px) { .cli-detalle { grid-template-columns: minmax(0, 1fr); } }
.cli-detalle__ancho { grid-column: 1 / -1; }
.cli-detalle__titulo {
margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.cli-detalle__datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.cli-detalle__datos dt { color: var(--mud-palette-text-secondary); font-size: .85rem; }
.cli-detalle__datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.cli-compras td { font-size: .85rem; }
.cli-compras__anulada td { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
/* ─── Estado de cuenta (clientes y proveedores, EstadoCuentaPanel) ─────────────────────────────
Arriba las cuatro vistas y la exportación; abajo los filtros de siempre (cli-filtros) y la tabla.
Los colores de antigüedad van de verde (por vencer) a rojo (+90), iguales en todas las vistas. */
.ec-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ec-exportar { margin-left: auto; }
/* MudToggleGroup reparte las cuatro vistas en una grilla de 4 (estilo en línea): en el teléfono, dos por fila. */
@media (max-width: 600px) {
.ec-vistas { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.ec-cabeza {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-bottom: 10px;
padding: 10px 14px; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px;
background: var(--mud-palette-surface, #fff);
}
.ec-cabeza__nombre { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ec-cabeza__titulo { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.ec-cabeza__sub { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ec-dato { display: flex; flex-direction: column; align-items: flex-end; }
.ec-dato span { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.ec-dato strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-dato--vencido strong { color: #dc2626; }
.ec-rangos { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.ec-rango {
padding: 3px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: .8rem;
background: var(--mud-palette-surface, #fff); white-space: nowrap;
}
.ec-rango strong { font-variant-numeric: tabular-nums; }
/* Por vencer → +90: el mismo color en los chips, en la columna del rango y en los días. */
.ec-r0, .ec-al-dia { color: #15803d; }
.ec-r1 { color: #b45309; }
.ec-r2 { color: #c2410c; }
.ec-r3 { color: #dc2626; }
.ec-r4 { color: #991b1b; font-weight: 600; }
.ec-baja { color: #15803d; }
.ec-sube { color: #dc2626; font-size: .75rem; }
/* MudBlazor carga después y pinta la celda con .mud-table-root .mud-table-body .mud-table-cell: hace falta una clase más. */
.ec-tabla .mud-table-body .mud-table-cell.ec-r0, .ec-tabla .mud-table-body .mud-table-cell.ec-baja { color: #15803d; }
.ec-tabla .mud-table-body .mud-table-cell.ec-r1 { color: #b45309; }
.ec-tabla .mud-table-body .mud-table-cell.ec-r2 { color: #c2410c; }
.ec-tabla .mud-table-body .mud-table-cell.ec-r3 { color: #dc2626; }
.ec-tabla .mud-table-body .mud-table-cell.ec-r4 { color: #991b1b; font-weight: 600; }
.ec-tabla .ec-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-tabla .mud-table-foot .mud-table-cell { font-weight: 700; }
.ec-tabla .ec-fila-clic { cursor: pointer; }
.ec-vacio {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px;
color: var(--mud-palette-text-secondary); text-align: center;
}
.ec-vacio .mud-icon-root { font-size: 2.2rem; opacity: .6; }
.ec-movil {
display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 12px;
border: 0; border-bottom: 1px solid var(--jfg-border, #e2e8f0); background: none;
font: inherit; color: inherit; text-align: left;
}
.ec-movil--boton { cursor: pointer; }
.ec-movil__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ec-movil__ppal { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-movil__sub { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.ec-movil strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ── Productos (Inventario › Productos) ───────────────────────────────────────────────────────────
Mismo patrón y clases que Clientes (cli-*). Aquí solo lo propio: la miniatura de la foto, el punto
de la existencia (verde, ámbar bajo el mínimo, rojo en cero), los números a la derecha y los
encabezados que ordenan. */
.prd-producto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prd-foto {
flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
background: #f1f5f9; border: 1px solid var(--jfg-border, #e2e8f0);
}
.prd-foto--vacia { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; }
.prd-foto--vacia .mud-icon-root { font-size: 1.1rem; }
.prd-codigo { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.prd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prd-tabla .mud-table-head .prd-num { text-align: right; }
.prd-exist { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prd-exist::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.prd-exist--bajo::before { background: #f59e0b; }
.prd-exist--cero::before { background: #ef4444; }
.prd-exist--cero { color: #dc2626; }
.prd-proveedor {
display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: middle;
}
.prd-orden {
display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none;
font: inherit; font-weight: 700; color: inherit; cursor: pointer; white-space: nowrap;
}
.prd-orden .mud-icon-root { font-size: .95rem; opacity: .3; }
.prd-orden:hover .mud-icon-root { opacity: .6; }
.prd-orden--activa { color: var(--mud-palette-primary); }
.prd-orden--activa .mud-icon-root { opacity: 1; }
/* El nombre se lleva el ancho que dejan las columnas que se quitaron; si es muy largo (los de repuestos lo
son), dos líneas y el resto al pasar el mouse, para que las filas no crezcan a seis u ocho renglones. */
.prd-tabla .prd-col-nombre { min-width: 300px; }
.prd-nombre {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
overflow: hidden; overflow-wrap: anywhere;
}
.prd-servicio {
display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
background: #dbeafe; color: #1e40af; font-size: 10px; font-weight: 600; line-height: 16px;
}
/* ── Ajustes de inventario (lista y «Nuevo ajuste») ─────────────────────────────────────────────────
La lista usa las clases de Clientes y Productos (cli-*, prd-*). Aquí solo lo propio: el color de
entradas y salidas, el motivo en dos líneas y el formulario a la medida de la ficha del artículo. */
.cli-chip--entrada { background: #dcfce7; color: #166534; }
.cli-chip--salida { background: #fee2e2; color: #991b1b; }
.cli-chip--merma { background: #fef3c7; color: #92400e; }
.aju-entrada { color: #15803d; }
.aju-salida { color: #dc2626; }
.aju-merma { color: #b45309; }
.aju-neto { font-weight: 700; }
.aju-negativo { color: #dc2626; }
.aju-tabla .aju-col-motivo { min-width: 260px; }
/* Los montos y cantidades a la derecha: el text-align de la celda de MudBlazor le gana a .prd-num sola. */
.aju-tabla .mud-table-cell.prd-num { text-align: right; }
.aju-motivo {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
overflow: hidden; overflow-wrap: anywhere; font-size: .82rem; color: var(--mud-palette-text-secondary);
}
/* Anulado: se ve en gris y tachado, y no suma en los totales del pie. */
.aju-estado { margin-left: 6px; padding: 0 8px; font-size: .7rem; vertical-align: 1px; }
.aju-fila--anulada .aju-entrada, .aju-fila--anulada .aju-salida, .aju-fila--anulada .aju-merma,
.aju-fila--anulada .aju-neto { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
/* Detalle: los montos a la izquierda; quién lo registró (y quién lo anuló) a la derecha. */
.aju-detalle__cabecera {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; align-items: start; margin-bottom: 12px;
}
.aju-registro { display: flex; flex-direction: column; gap: 10px; }
.aju-anulacion { padding-left: 10px; border-left: 3px solid var(--mud-palette-error); }
@media (max-width: 600px) { .aju-detalle__cabecera { grid-template-columns: minmax(0, 1fr); } }
.aju-cabecera {
display: grid; grid-template-columns: minmax(0, 1.3fr) 170px minmax(0, 2fr); gap: 12px; flex: none;
}
.aju-agregar {
display: grid; grid-template-columns: minmax(0, 2.4fr) 130px 120px 170px 120px auto; gap: 12px;
align-items: center; margin-top: 12px; flex: none;
}
.aju-agregar__boton { height: 40px; }
.aju-agregar__existencia { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.aju-agregar__existencia > span { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.aju-agregar__existencia b { font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
.aju-cabecera { grid-template-columns: minmax(0, 1fr) 170px; }
.aju-cabecera > :last-child { grid-column: 1 / -1; }
.aju-agregar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aju-agregar > :first-child { grid-column: 1 / -1; }
}
/* Solo la lista de líneas se desplaza: lo de arriba y los totales quedan a la vista. */
.aju-lineas {
flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 12px;
border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px;
}
.aju-lineas__vacia {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
height: 100%; min-height: 120px; color: var(--mud-palette-text-secondary); font-size: .9rem;
}
.aju-totales {
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; flex: none;
padding: 8px 4px 0; font-size: .88rem; font-variant-numeric: tabular-nums;
}
/* ── Traslados: misma lista y mismo formulario que Ajustes (aju-*); aquí solo lo propio ─────────────── */
.cli-chip--pendiente { background: #fef3c7; color: #92400e; }
.cli-chip--transito { background: #ede9fe; color: #5b21b6; }
.cli-chip--anulado { background: #f1f5f9; color: #475569; }
/* Cinco filtros: buscador, desde, hasta, estado y bodega. */
.cli-filtros__fila.trs-filtros__fila { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.cli-filtros__fila.trs-filtros__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cli-filtros__fila.trs-filtros__fila > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .cli-filtros__fila.trs-filtros__fila { grid-template-columns: minmax(0, 1fr); } }
.trs-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.trs-ruta .mud-icon-root { font-size: 1rem; color: var(--mud-palette-text-secondary); }
/* Anulado o rechazado: no dejó mercadería movida. En el detalle, quién hizo cada paso va junto a su fecha. */
.trs-fila--anulada .trs-ruta { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
.trs-quien { color: var(--mud-palette-text-secondary); }
.trs-cabecera {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 170px minmax(0, 1.2fr); gap: 12px; flex: none;
}
.trs-agregar {
display: grid; grid-template-columns: minmax(0, 2.6fr) 130px 140px auto; gap: 12px;
align-items: center; margin-top: 12px; flex: none;
}
@media (max-width: 960px) {
.trs-cabecera, .trs-agregar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trs-agregar > :first-child { grid-column: 1 / -1; }
}
.trs-tipo { margin-right: auto; color: var(--mud-palette-text-secondary); }
/* ══ Compras de Mercadería (AdminCompraMercaderiaPage): la lista ═══════════════════════════════
Con las clases cli-* de Productos y Ajustes. Filas bajas: diez compras y el paginador entran sin
scroll en una laptop (1536×730). */
.cmp-tabla .mud-table-cell.prd-num { text-align: right; }
/* Con mouse, el ojo de la fila, el paginador y «Limpiar filtros» miden lo que el texto (el mínimo de
40 px para el dedo, de app.css, estiraba la fila y el pie). En pantalla táctil quedan grandes. */
@media (pointer: fine) {
.cmp-tabla .mud-table-body .mud-icon-button { padding: 2px; }
.cli-pie .mud-pagination .mud-button-root,
.cli-filtros__botones .mud-button-root { min-height: 0; }
}
/* ══ Pago a proveedor (AdminPagoProveedorPage): el formulario ══════════════════════════════════
Facturas (suman) y notas de crédito (restan) en una sola lista con las filas de Compra de Mercadería
(cmx-linea, de EstilosCompra) y los campos bajos de .tabla-compras. Las diez columnas entran en una
laptop (1536×730 al 125 %); más angosto se van el total y lo que queda, y en el teléfono quedan el
documento y el monto. */
.pgp-docs { --cmx-columnas: 28px 88px minmax(0, 1fr) 62px 62px 92px 92px 124px 88px 28px; }
@media (max-width: 1200px) {
.pgp-docs { --cmx-columnas: 28px 88px minmax(0, 1fr) 62px 62px 92px 124px 28px; }
.pgp-docs .pgp-opc { display: none; }
}
.pgp-docs .pgp-aplicar { text-align: right; }
.pgp-docs .cli-chip { padding: 1px 7px; font-size: .7rem; }
.pgp-docs .cmx-linea.pgp-posterior { opacity: .55; cursor: not-allowed; }
/* Filas bajas como las de la compra: el campo del monto más bajo que el de .tabla-compras y, con mouse, la
casilla y el ojo sin el mínimo de 44 px para el dedo (app.css). En pantalla táctil quedan grandes. */
.pgp-docs.tabla-compras .mud-input-root,
.pgp-docs.tabla-compras .mud-input.mud-input-outlined input { padding-top: 3px !important; padding-bottom: 3px !important; }
@media (pointer: fine) {
.pgp-docs .mud-icon-button { padding: 2px; min-height: 0; }
}
.cli-chip--factura { background: #dbeafe; color: #1e40af; }
.cli-chip--nota { background: #fee2e2; color: #991b1b; }
/* «Ver documento» (DocumentoPagoDialog): los datos en dos pares por fila. */
.pgp-datos { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.pgp-datos .pgp-largo { grid-column: span 3; }
@media (max-width: 600px) {
.pgp-datos { grid-template-columns: auto minmax(0, 1fr); }
.pgp-datos .pgp-largo { grid-column: auto; }
}
/* ══ Kardex (AdminKardexPage y KardexMovimientoDialog) ═══════════════════════════════════════════
Sin tope de fechas: el kardex sale por cortes de mes (una fila por mes con lo que entró, salió y quedó)
y cada mes se abre para ver sus movimientos. Arriba, el artículo y los números del período. */
.kdx-cabecera {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
padding: 10px 14px; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px;
}
.kdx-articulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kdx-articulo__nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kdx-numeros { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.kdx-numeros > div { display: flex; flex-direction: column; align-items: flex-end; }
.kdx-numeros span { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.kdx-numeros b { font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kdx-barra {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--jfg-border, #e2e8f0);
font-size: .82rem; color: var(--mud-palette-text-secondary);
}
/* En teléfono la tabla se desplaza de lado; la página no. */
.kdx-envoltura { overflow-x: auto; }
.kdx-tabla .mud-table-cell.prd-num { text-align: right; }
.kdx-tabla .kdx-col-doc { max-width: 340px; }
.kdx-doc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdx-corte { display: flex; align-items: center; gap: 6px; }
/* El corte del mes: una banda, para que se vea dónde cierra cada mes. */
.kdx-tabla .kdx-fila--corte > .mud-table-cell {
background: var(--mud-palette-background-gray, #f1f5f9); border-top: 2px solid var(--jfg-border-2, #cbd5e1); font-weight: 600;
}
.kdx-tabla .kdx-fila--saldo > .mud-table-cell { background: #eef2ff; }
.kdx-tabla .kdx-fila--revertido > .mud-table-cell { opacity: .6; }
.kdx-tabla .kdx-fila--este > .mud-table-cell { background: #fefce8; }
.kdx-mov__pie { padding: 8px 4px 0; font-size: .82rem; color: var(--mud-palette-text-secondary); text-align: right; }
@media (pointer: fine) {
.kdx-tabla .mud-table-body .mud-icon-button { padding: 2px; }
}
/* ══ Reportes de inventario (AdminReportesInventarioPage, valorizado y movimiento del período) ═════
La página de reportes son tarjetas por grupo (contador / negocio); el movimiento del período es un
estado de renglones (inicial + entradas − salidas = final) con los documentos a un clic. */
.rin-grupo { margin: 4px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.rin-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rin-tarjeta {
display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; cursor: pointer;
border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px; background: var(--mud-palette-surface, #fff);
font: inherit; color: inherit; transition: box-shadow .18s, border-color .18s;
}
.rin-tarjeta:hover { border-color: var(--jfg-border-2, #cbd5e1); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.rin-tarjeta:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.rin-tarjeta__icono {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
border-radius: 12px; background: #ecfdf5; color: var(--mud-palette-primary, #10b981);
}
.rin-tarjeta__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rin-tarjeta__titulo { font-weight: 700; }
.rin-tarjeta__para { font-size: .82rem; color: var(--mud-palette-text-secondary); line-height: 1.35; }
.rin-tarjeta__ir { color: var(--mud-palette-text-secondary); }
.rin-barra { height: 6px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.rin-barra > span { display: block; height: 100%; background: var(--mud-palette-primary, #10b981); }
.mov-cabeza { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 960px) { .mov-cabeza { grid-template-columns: minmax(0, 1fr); } }
.mov-estado { padding: 6px 0; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px; overflow: hidden; }
.mov-renglon {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%;
padding: 7px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: left;
font-variant-numeric: tabular-nums;
}
.mov-renglon > span:last-child { white-space: nowrap; font-weight: 600; }
.mov-renglon--concepto { cursor: pointer; }
.mov-renglon--concepto:hover:not(:disabled) { background: var(--mud-palette-action-default-hover, #f8fafc); }
.mov-renglon--concepto:disabled { cursor: default; }
.mov-renglon--total { font-weight: 800; }
.mov-renglon--final { border-top: 2px solid var(--jfg-border-2, #cbd5e1); margin-top: 4px; padding-top: 10px; }
.mov-signo { display: inline-block; width: 18px; color: var(--mud-palette-text-secondary); font-weight: 700; }
.mov-lado { display: flex; flex-direction: column; gap: 12px; }
.mov-dato {
display: flex; flex-direction: column; gap: 2px; padding: 12px 16px;
border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px;
}
.mov-dato > span:first-child { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.mov-dato > b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
/* ══ Utilidad bruta y antigüedad del inventario (AdminUtilidadBrutaPage, AdminAntiguedadInventarioPage) ══
El margen en color (pierde / deja poco / deja bien) y los tramos de la antigüedad: una barra con el peso de
cada tramo y una tarjeta por tramo, del verde (sale seguido) al rojo (quieto hace años). */
.utl-margen { font-weight: 700; font-variant-numeric: tabular-nums; }
.utl-margen--pierde { color: #dc2626; }
.utl-margen--bajo { color: #b45309; }
.utl-margen--bien { color: #15803d; }
.ant-barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #f1f5f9; }
.ant-barra > span { display: block; height: 100%; }
.ant-tramos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ant-tramos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ant-tramos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ant-tramo {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left; cursor: pointer;
border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 12px; background: var(--mud-palette-surface, #fff);
font: inherit; color: inherit;
}
.ant-tramo:hover { border-color: var(--jfg-border-2, #cbd5e1); }
.ant-tramo--activo { border-color: var(--mud-palette-primary, #10b981); box-shadow: 0 0 0 1px var(--mud-palette-primary, #10b981); }
.ant-tramo > b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ant-tramo__nombre { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.ant-punto { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.ant-color-0 { background: #22c55e; }
.ant-color-1 { background: #84cc16; }
.ant-color-2 { background: #f59e0b; }
.ant-color-3 { background: #f97316; }
.ant-color-4 { background: #dc2626; }
.ant-color-5 { background: #94a3b8; }
/* ── Toma física (tfi-*) ───────────────────────────────────────────────────────────────────────── */
.tfi-faltante { color: var(--mud-palette-error); font-variant-numeric: tabular-nums; }
.tfi-sobrante { color: var(--mud-palette-success-darken, var(--mud-palette-success)); font-variant-numeric: tabular-nums; }
.tfi-tabla .mud-table-cell.prd-num { text-align: right; white-space: nowrap; }
.tfi-resumen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px;
}
.tfi-dato {
display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px; background: var(--mud-palette-surface);
}
.tfi-dato > span:first-child { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.tfi-dato > b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.tfi-dato > b > small, .tfi-dato > small { font-size: .78rem; font-weight: 400; color: var(--mud-palette-text-secondary); }
/* Teléfono: los tres datos del conteo en una fila; los montos de a dos. */
@media (max-width: 600px) {
.tfi-resumen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tfi-dato { grid-column: span 2; padding: 8px 10px; border-radius: 12px; }
.tfi-dato--monto { grid-column: span 3; }
.tfi-dato--ancho { grid-column: 1 / -1; }
.tfi-dato > b { font-size: 1.1rem; }
.tfi-dato > span:first-child, .tfi-dato > b > small, .tfi-dato > small { font-size: .72rem; }
}
/* Encabezado: en el teléfono los papeles (hoja, Excel, diferencias, acta) y cancelar van en «Más», y el estado
pasa al renglón de la bodega; los botones quedan en una fila a la izquierda. */
.tfi-estado--movil { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 600px) {
.tfi-sec { display: none !important; }
.tfi-encabezado .jfg-pagehead-actions { margin-left: 0; }
}
@media (min-width: 601px) { .tfi-mas, .tfi-estado--movil { display: none !important; } }
/* Captura: código → (cámara) → artículo → cantidad y sumar → dónde → «cada lectura suma», en una fila.
En el teléfono y la tableta, una columna de filas cómodas para el dedo; la cámara abierta va arriba. */
.tfi-captura { padding: 12px 14px; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 14px; }
.tfi-captura__campos {
display: grid; gap: 8px 10px; align-items: center;
grid-template-columns: minmax(240px, 320px) auto minmax(160px, 1fr) auto auto auto;
grid-template-areas: "codigo camara articulo cantidad donde modo";
}
.tfi-captura__codigo { grid-area: codigo; display: flex; align-items: center; gap: 4px; min-width: 0; }
.tfi-captura__codigo > .mud-input-control { flex: 1; min-width: 0; }
.tfi-captura__camara { grid-area: camara; }
.tfi-captura__articulo { grid-area: articulo; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfi-captura__articulo small { color: var(--mud-palette-text-secondary); }
.tfi-captura__cantidad { grid-area: cantidad; display: flex; align-items: center; gap: 8px; }
.tfi-captura__cantidad > .mud-input-control { flex: none; width: 120px; }
.tfi-captura__donde { grid-area: donde; width: 210px; }
.tfi-captura__modo { grid-area: modo; }
/* Digitar una hoja de papel: su propia fila, con cuándo se contó. */
.tfi-captura__papel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tfi-captura__papel > .mud-input-control, .tfi-captura__papel > .mud-picker { flex: none; width: 170px; }
.tfi-captura__ultimo {
grid-column: 1 / -1; font-size: .85rem; color: var(--mud-palette-success-darken, var(--mud-palette-success));
}
.tfi-captura__visor { margin-bottom: 10px; }
/* La cámara: en el teléfono y la tableta; en la computadora con mouse no (ahí se usa el lector de mano). */
@media (min-width: 961px) and (pointer: fine) { .tfi-captura__camara { display: none !important; } }
@media (max-width: 960px) {
.tfi-captura { padding: 12px; }
.tfi-captura__campos { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.tfi-captura__articulo { white-space: normal; line-height: 1.35; }
.tfi-captura__cantidad > .mud-input-control { flex: 1; width: auto; min-width: 0; }
.tfi-captura__donde { width: auto; }
}
.tfi-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px 4px; }
.tfi-filtros .mud-input-control { max-width: 280px; }
/* Teléfono: los filtros en una fila que se desliza; búsqueda y ubicación lado a lado. */
@media (max-width: 600px) {
.tfi-filtros { gap: 8px; padding: 10px 10px 6px; }
.tfi-filtros .mud-chipset { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
.tfi-filtros .mud-chipset::-webkit-scrollbar { display: none; }
.tfi-filtros .mud-chip { flex: none; margin: 2px 6px 2px 0; }
.tfi-filtros > .mud-input-control, .tfi-filtros > .mud-select { flex: 1 1 140px; min-width: 0; }
.tfi-filtros .mud-input-control { max-width: none; }
}
/* Lista del teléfono: el nombre completo en hasta dos líneas (en repuestos lo que distingue va al final). */
.tfi-movil .cli-movil__nombre {
white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
font-weight: 500; font-size: .86rem; line-height: 1.3;
}
.tfi-movil .cli-movil__fila > b, .tfi-movil .cli-movil__fila > .jfg-celda__vacio { flex: none; white-space: nowrap; }
.tfi-movil .cli-movil__sub { white-space: normal; }
.tfi-movil .tfi-etiqueta { margin: 0 0 0 4px; }
.tfi-etiqueta {
display: inline-block; font-size: .7rem; padding: 0 6px; margin-right: 4px; border-radius: 8px;
background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary);
}
.tfi-etiqueta--recontar { background: rgba(255, 152, 0, .15); color: #b26a00; }
.tfi-etiqueta--revision { background: rgba(244, 67, 54, .12); color: var(--mud-palette-error); }
.tfi-nueva { display: flex; flex-direction: column; gap: 10px; }
.tfi-nueva__tipo { display: flex; flex-direction: column; gap: 2px; }
.tfi-nueva__alcance { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 3px solid var(--mud-palette-primary); }
.tfi-nueva__sugeridos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tfi-nueva__opciones { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tfi-nueva__previa { display: flex; flex-direction: column; gap: 2px; min-height: 24px; }
.tfi-revisar__cifras { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.tfi-revisar__cifras > span { display: flex; flex-direction: column; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.tfi-revisar__cifras b { font-size: 1.05rem; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.tfi-registros td, .tfi-registros th { white-space: nowrap; }
.tfi-anulado td { text-decoration: line-through; color: var(--mud-palette-text-disabled); }
.tfi-errores { margin: 6px 0 0 18px; font-size: .82rem; }
/* ── Lector con la cámara (LectorCamara, js/camara-codigo.js) ────────────────────────────────────── */
/* La guía mide lo mismo que el recorte que se lee (GUIA_ANCHO 84 %, GUIA_ALTO 60 % en el módulo). */
.lcam { display: flex; flex-direction: column; gap: 8px; }
.lcam__visor {
position: relative; overflow: hidden; height: clamp(180px, 34vh, 300px);
border-radius: 12px; background: #0f172a;
}
.lcam__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lcam__guia {
position: absolute; left: 8%; right: 8%; top: 20%; bottom: 20%;
border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(15, 23, 42, .35); transition: border-color .15s, box-shadow .15s;
}
.lcam__guia::after {
content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: rgba(239, 68, 68, .85);
}
.lcam__visor--leido .lcam__guia { border-color: #22c55e; box-shadow: 0 0 0 9999px rgba(34, 197, 94, .28); }
.lcam__aviso {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
text-align: center; font-size: .9rem; color: #fff; background: rgba(15, 23, 42, .72);
}
.lcam__barra { display: flex; align-items: center; gap: 8px; }
.lcam__texto {
flex: 1; min-width: 0; font-size: .82rem; color: var(--mud-palette-text-secondary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcam__texto--ok { color: var(--mud-palette-success-darken, var(--mud-palette-success)); }
/* ── Recetas (lista y ficha). La ficha usa el formulario de Ajustes (aju-*); aquí solo lo propio ───────────── */
.cli-chip--borrador { background: #fef3c7; color: #92400e; }
.rec-version { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.cli-filtros__fila.rec-filtros { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; align-items: center; }
@media (max-width: 800px) {
.cli-filtros__fila.rec-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cli-filtros__fila.rec-filtros > :first-child { grid-column: 1 / -1; }
}
/* Nombre, tipo, cuánto rinde (cantidad y en qué) y minutos. */
.rec-cabecera {
display: grid; grid-template-columns: minmax(0, 2.4fr) 150px 110px 170px 110px; gap: 12px; flex: none;
}
/* Ingrediente, cantidad, unidad, costo y el botón. */
.rec-agregar {
display: grid; grid-template-columns: minmax(0, 2.6fr) 120px 150px 120px auto; gap: 12px;
align-items: center; margin-top: 12px; flex: none;
}
@media (max-width: 960px) {
.rec-cabecera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-cabecera > :first-child { grid-column: 1 / -1; }
.rec-agregar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-agregar > :first-child { grid-column: 1 / -1; }
}
.rec-ingrediente { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-problema { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: #b45309; }
.rec-tabla .rec-cantidad { max-width: 90px; margin-left: auto; }
.rec-tabla .rec-cantidad input { text-align: right; }
.rec-tabla .rec-rend { max-width: 78px; margin-left: auto; }
.rec-tabla .rec-rend input { text-align: right; }
/* «Se produce por lote» de una subreceta: el interruptor y qué quiere decir. */
.rec-existencia {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; padding: 6px 12px;
border: 1px dashed var(--jfg-border, #e2e8f0); border-radius: 10px;
}
.rec-existencia > span { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.rec-pie {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; flex: none; margin-top: 10px;
}
@media (max-width: 800px) { .rec-pie { grid-template-columns: minmax(0, 1fr); } }
.rec-totales {
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; padding-top: 6px;
font-size: .88rem; font-variant-numeric: tabular-nums;
}
/* El semáforo del food cost: hasta 30 % bien, hasta 35 % ojo, más alto. */
.rec-fc { padding: 0 8px; border-radius: 999px; }
.rec-fc--bien { background: #dcfce7; color: #166534; }
.rec-fc--ojo { background: #fef3c7; color: #92400e; }
.rec-fc--alto { background: #fee2e2; color: #991b1b; }
.rec-versiones { flex: none; margin-top: 6px; }
.rec-version-fila { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 4px 0; font-size: .85rem; }
.rec-medida { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: center; margin-top: 8px; }
/* Consumo de cocina: dos fechas y el resumen en tarjetas. */
.cli-filtros__fila.rec-filtros-consumo { grid-template-columns: repeat(2, minmax(0, 220px)); }
.rec-resumen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rec-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-resumen__tarjeta {
display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px;
border: 1px solid var(--jfg-border, #e2e8f0); background: var(--mud-palette-surface);
}
.rec-resumen__tarjeta span { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.rec-resumen__tarjeta b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rec-resumen__tarjeta--aviso b { color: #b45309; }
/* Asistente «Empezar con recetas»: cuatro pasos numerados y la lista de platos sin receta. */
.rec-asistente { display: flex; flex-direction: column; gap: 14px; }
.rec-asistente section { display: flex; flex-direction: column; gap: 4px; }
.rec-asistente h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 600; }
.rec-asistente p { margin: 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.rec-asistente section > .mud-button-root { align-self: flex-start; }
.rec-asistente__paso {
display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: .75rem; font-weight: 700;
}
.rec-asistente__platos {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 260px; overflow-y: auto;
border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 10px; padding: 4px 8px;
}
@media (max-width: 600px) { .rec-asistente__platos { grid-template-columns: 1fr; } }
.rec-asistente__vendidos { margin-left: 6px; font-size: .75rem; color: var(--mud-palette-text-secondary); }
/* Producir: preparación, cuánto, cuánto salió y lo que hay. Debajo, los ingredientes (receta contra lo real). */
.rec-producir { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; }
@media (max-width: 760px) { .rec-producir { grid-template-columns: 1fr 1fr; } .rec-producir > :first-child { grid-column: 1 / -1; } }
.rec-produccion-detalle { padding: 6px 16px 12px 32px !important; background: var(--mud-palette-background-gray); }
.rec-produccion-detalle table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rec-produccion-detalle th { text-align: left; font-weight: 600; color: var(--mud-palette-text-secondary); padding: 4px 8px; }
.rec-produccion-detalle td { padding: 3px 8px; border-top: 1px solid var(--jfg-border, #e2e8f0); }
.rec-produccion-detalle .prd-num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-produccion-detalle__nota { margin-top: 6px; font-size: .82rem; color: var(--mud-palette-text-secondary); }
/* Importar recetas: el resultado de la revisión, una fila por receta. */
.rec-importar__lista { max-height: 340px; overflow-y: auto; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 10px; }
.rec-importar__fila { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-top: 1px solid var(--jfg-border, #e2e8f0); }
.rec-importar__fila:first-child { border-top: none; }
.rec-importar__nombre { flex: 1; min-width: 0; }
.rec-importar__errores { margin: 2px 0 0; padding-left: 18px; font-size: .8rem; color: #b91c1c; }
/* Plantillas de recetas: cuál, qué recetas y con qué artículos. */
.rec-plantillas__tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .rec-plantillas__tipos { grid-template-columns: 1fr; } }
.rec-plantillas__tipo {
text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--jfg-border, #e2e8f0);
background: var(--mud-palette-surface); cursor: pointer; font: inherit; color: inherit;
}
.rec-plantillas__tipo--activo { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 1px var(--mud-palette-primary); }
.rec-plantillas__tipo b { display: block; }
.rec-plantillas__tipo span { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.rec-plantillas__recetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .rec-plantillas__recetas { grid-template-columns: 1fr; } }
.rec-plantillas__insumos { max-height: 260px; overflow-y: auto; border: 1px solid var(--jfg-border, #e2e8f0); border-radius: 10px; }
.rec-plantillas__insumo {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: center;
padding: 4px 10px; border-top: 1px solid var(--jfg-border, #e2e8f0); font-size: .85rem;
}
.rec-plantillas__insumo:first-child { border-top: none; }
.rec-plantillas__nuevo { color: var(--mud-palette-text-secondary); font-size: .8rem; }
/* Desperdicio: pensado para el teléfono (el motivo con un toque). */
.rec-resumen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rec-resumen--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-desperdicio { display: flex; flex-direction: column; gap: 14px; }
.rec-desperdicio__cantidad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rec-desperdicio__motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-desperdicio__motivo {
min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 1px solid var(--jfg-border, #e2e8f0);
background: var(--mud-palette-surface); color: inherit; font: inherit; font-size: .9rem; cursor: pointer;
}
.rec-desperdicio__motivo span { display: block; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.rec-desperdicio__motivo--activo { border-color: var(--mud-palette-error); box-shadow: 0 0 0 1px var(--mud-palette-error); font-weight: 600; }
.rec-motivos { display: flex; flex-direction: column; gap: 6px; }
.rec-motivos__fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
@media (max-width: 600px) { .rec-motivos__fila { grid-template-columns: minmax(0, 1fr) auto; } }
.rec-reingresos { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.rec-reingresos__fila {
display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 6px 4px; border-top: 1px solid var(--jfg-border, #e2e8f0); font-size: .88rem;
}
/* Costos de la cocina: aviso de alza, la matriz de la ingeniería de menú. */
.rec-alza { display: block; font-size: .72rem; color: #b45309; font-weight: 600; }
.rec-matriz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .rec-matriz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-matriz__celda {
padding: 10px 12px; border-radius: 12px; border: 1px solid var(--jfg-border, #e2e8f0); background: var(--mud-palette-surface);
display: flex; flex-direction: column; gap: 2px; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.rec-matriz__celda--activa { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 1px var(--mud-palette-primary); }
.rec-matriz__celda b { font-size: 1.05rem; }
.rec-matriz__celda span { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.rec-diferencia { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; padding: 4px 2px; }
.rec-diferencia b { font-variant-numeric: tabular-nums; }
/* Pronóstico de la cocina: filtros, franjas, muestras y el pronóstico que se corrige a mano. */
.cli-filtros__fila.rec-filtros-pronostico { grid-template-columns: repeat(4, minmax(0, 200px)); }
@media (max-width: 900px) { .cli-filtros__fila.rec-filtros-pronostico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-franjas { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.rec-franjas b { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.rec-muestras-dias { font-size: .95rem; }
.rec-muestras { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.rec-pronostico__dia { width: 84px; margin-left: auto; }
.rec-pronostico__dia input { text-align: right; font-variant-numeric: tabular-nums; }
.rec-pronostico__dia--corregido .mud-input-outlined-border { border-color: var(--mud-palette-warning); }