/* ============================================================ Modulo SERIGRAFIA — configurador de disenos (.srg-*) ------------------------------------------------------------ Estructura calcada de la aplicacion que usa hoy AECO, porque es la que el usuario tiene aprendida: tres secciones en una nav lateral (Textil / Vinilos / Lonas), y dentro de Textil las tecnicas AGRUPADAS EN BLOQUES independientes — cada uno con su selector, sus unidades y su propia lista de lineas. NO una lista generica de "aplicaciones". El total del diseno vive en una barra inferior fija y NO se reinicia al cambiar de seccion: un diseno puede llevar camisetas y lona a la vez. Theme-aware: todo color sale de var(--color-*) del ERP. NO hardcodear hex salvo como fallback var(--x, #fallback). ============================================================ */ /* Tokens del modulo. Se declaran en DOS anclajes a proposito, y es una sola declaracion, no una copia: los overlays del ERP cuelgan de (patron canonico de modales), donde .srg-root NO es ancestro. Sin el segundo selector, todo lo que dentro del panel use --srg-success/warning/danger sale sin color — el mismo motivo por el que firmaPad solo se atreve con .srg-btn y .srg-btn-primary (serigrafia_views.js:187-190). */ .srg-root, .srg-pp { --srg-success: var(--color-success, #10b981); --srg-warning: var(--color-warning, #f59e0b); --srg-danger: var(--color-danger, #ef4444); --srg-radius: var(--radius-lg, .75rem); } .srg-root { height: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; background: transparent; color: var(--color-text-primary, #f1f5f9); overflow: hidden; /* Tamano BASE del modulo. Sin esto cada parrafo suelto hereda lo que traiga el shell, que es mas pequeno, y hay que ir persiguiendo el tamano regla a regla. Se fija una vez aqui y lo demas parte de esto. */ font-size: var(--font-size-base, 1rem); line-height: 1.5; } /* --- armazon: nav lateral + area de trabajo + barra inferior --------- */ .srg-shell { flex: 1 1 auto; display: flex; min-height: 0; } .srg-nav { flex: 0 0 auto; width: 156px; display: flex; flex-direction: column; border-right: 1px solid var(--color-border, #334155); background: var(--color-bg-secondary, #1e293b); } .srg-nav-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1rem .5rem; cursor: pointer; border: none; width: 100%; background: transparent; color: var(--color-text-muted, #64748b); border-bottom: 1px solid var(--color-border, #334155); border-left: 3px solid transparent; font-family: inherit; font-size: var(--font-size-sm, .875rem); font-weight: 600; letter-spacing: .03em; transition: var(--transition, all .18s ease); } .srg-nav-item:hover { background: var(--color-bg-hover, #334155); color: var(--color-text-primary, #f1f5f9); } .srg-nav-item.is-on { background: var(--color-bg-card, #0f172a); color: var(--color-accent, #6366f1); border-left-color: var(--color-accent, #6366f1); } .srg-nav-ico { font-size: 1.4rem; line-height: 1; width: 1.6rem; text-align: center; } /* Contador de lineas de la seccion: se ve de un vistazo si hay algo dentro aunque estes en otra pestana. */ .srg-nav-badge { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-accent, #6366f1); color: #fff; font-size: 10px; line-height: 18px; font-weight: 700; } /* El scroll NO va aqui: si scrollea .srg-main se lleva por delante la cabecera de la seccion ("Textil", "Vinilos"...). Va dentro de cada seccion, por debajo de su cabecera. Misma regla que las vistas del ciclo. */ .srg-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; padding: var(--space-lg, 1.25rem); display: flex; flex-direction: column; } .srg-sec { display: none; } .srg-sec.is-on { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* La cabecera de la seccion se queda; lo de debajo se desplaza. */ .srg-sec > .srg-header { flex: 0 0 auto; } .srg-sec.is-on > *:not(.srg-header) { flex: 0 0 auto; } .srg-sec-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: .25rem; } /* --- barra inferior: el total NO se pierde al cambiar de seccion ----- */ .srg-footer { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-md, 1rem); padding: .75rem var(--space-lg, 1.25rem); border-top: 1px solid var(--color-border, #334155); background: var(--color-bg-secondary, #1e293b); } .srg-footer-spacer { flex: 1 1 auto; } .srg-total-box { display: flex; align-items: baseline; gap: .75rem; padding: .4rem 1rem; border-radius: var(--srg-radius); background: var(--color-bg-card, #0f172a); border: 1px solid var(--color-border, #334155); } .srg-total-lbl { font-size: var(--font-size-base, 1rem); color: var(--color-text-muted, #64748b); font-weight: 500; } .srg-total-val { font-size: var(--font-size-2xl, 1.5rem); font-weight: 700; color: var(--color-accent, #6366f1); font-variant-numeric: tabular-nums; transition: color .2s ease; } .srg-total-val.is-calc { color: var(--color-text-muted, #64748b); } /* --- tarjetas y bloques --------------------------------------------- */ .srg-card { background: var(--color-bg-card, var(--color-bg-secondary, #1e293b)); border: 1px solid var(--color-border, #334155); border-radius: var(--srg-radius); margin-bottom: var(--space-md, 1rem); overflow: hidden; } .srg-card-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.1rem; background: var(--color-bg-hover, #334155); border-bottom: 1px solid var(--color-border, #334155); } .srg-card-title { font-size: var(--font-size-lg, 1.125rem); font-weight: 600; color: var(--color-text-primary, #f1f5f9); letter-spacing: .02em; flex: 1 1 auto; } .srg-card-sub { font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #64748b); font-weight: 400; } /* Icono de la tarjeta, a la izquierda del titulo. */ .srg-card-ico { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; width: 1.5rem; text-align: center; } .srg-card-body { padding: 1.1rem; } /* Texto explicativo de una tarjeta: legible, no letra pequena de contrato. */ .srg-card-body p { margin: 0 0 .6rem; font-size: var(--font-size-base, 1rem); line-height: 1.55; } .srg-card-body p:last-child { margin-bottom: 0; } /* Total del bloque, a la derecha de su cabecera. */ .srg-card-total { font-size: var(--font-size-base, 1rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary, #f1f5f9); padding: .1rem .5rem; border-radius: var(--radius-sm, .375rem); background: var(--color-bg-card, #0f172a); } .srg-card-total.is-zero { color: var(--color-text-muted, #64748b); background: transparent; } /* --- layout de la seccion TEXTIL ------------------------------------ */ .srg-textil { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--space-md, 1rem); align-items: start; } @media (max-width: 1180px) { .srg-textil { grid-template-columns: minmax(0,1fr); } } /* --- formulario ------------------------------------------------------ */ .srg-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .srg-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; } .srg-field.is-narrow { flex: 0 0 108px; } .srg-field.is-mid { flex: 0 0 160px; } .srg-label { font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #64748b); font-weight: 500; } .srg-input, .srg-select { width: 100%; box-sizing: border-box; padding: .55rem .7rem; background: var(--color-bg-input, var(--color-bg-secondary, #1e293b)); border: 1px solid var(--color-border, #334155); border-radius: var(--radius-md, .5rem); color: var(--color-text-primary, #f1f5f9); font-size: var(--font-size-base, 1rem); font-family: inherit; outline: none; transition: var(--transition, all .18s ease); } .srg-input:focus, .srg-select:focus { border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px var(--color-accent-subtle, rgba(99,102,241,.15)); } .srg-input[readonly] { background: var(--color-bg-card, #0f172a); color: var(--color-text-muted, #64748b); } .srg-input.is-num { text-align: right; font-variant-numeric: tabular-nums; } /* --- botones --------------------------------------------------------- */ .srg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .95rem; border-radius: var(--radius-md, .5rem); border: 1px solid var(--color-border, #334155); /* Fondo SIEMPRE visible: sobre --color-bg-card un boton transparente "se ve poco", y es una queja que no se repite. */ background: var(--color-bg-hover, #334155); color: var(--color-text-primary, #f1f5f9); font-size: var(--font-size-base, 1rem); font-family: inherit; cursor: pointer; white-space: nowrap; transition: var(--transition, all .18s ease); } .srg-btn:hover:not(:disabled) { background: var(--color-accent-subtle, rgba(99,102,241,.15)); border-color: var(--color-accent, #6366f1); } .srg-btn:disabled { opacity: .4; cursor: not-allowed; } .srg-btn-primary { background: var(--color-accent, #6366f1); border-color: var(--color-accent, #6366f1); color: #fff; font-weight: 600; } .srg-btn-primary:hover:not(:disabled) { filter: brightness(1.12); background: var(--color-accent, #6366f1); } .srg-btn-ok { background: var(--srg-success); border-color: var(--srg-success); color: #fff; font-weight: 600; } .srg-btn-ok:hover:not(:disabled) { filter: brightness(1.12); background: var(--srg-success); } .srg-btn-danger { color: var(--srg-danger); } .srg-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--srg-danger) 15%, transparent); border-color: var(--srg-danger); } /* Boton cuadrado de "anadir", como el + de la app original */ .srg-btn-ico { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; font-size: 1.15rem; line-height: 1; } /* --- lista de lineas de un bloque ------------------------------------ */ .srg-lineas { display: flex; flex-direction: column; gap: .3rem; margin-top: .7rem; } .srg-linea { display: flex; align-items: center; gap: .4rem; padding: .35rem .4rem .35rem .75rem; border-radius: 999px; background: var(--color-bg-secondary, #1e293b); border: 1px solid var(--color-border, #334155); /* El pico de color de la izquierda identifica la tecnica de un vistazo, igual que la marca roja de la aplicacion original. */ border-left: 4px solid var(--color-accent, #6366f1); font-size: var(--font-size-base, 1rem); animation: srgIn .16s ease; } @keyframes srgIn { from { opacity: 0; transform: translateY(-3px); } } .srg-linea-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srg-linea-num { flex: 0 0 auto; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted, #64748b); } .srg-linea-imp { flex: 0 0 auto; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .srg-linea-del { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--srg-danger); font-size: .95rem; line-height: 1; transition: var(--transition, all .15s ease); } .srg-linea-del:hover { background: color-mix(in srgb, var(--srg-danger) 18%, transparent); } .srg-linea.srg-t-SERIGRAFIA { border-left-color: var(--color-accent, #6366f1); } .srg-linea.srg-t-DIRECTA { border-left-color: var(--srg-warning); } .srg-linea.srg-t-DTF { border-left-color: var(--srg-success); } .srg-linea.srg-t-BORDADO { border-left-color: #a855f7; } .srg-linea.srg-t-PRENDA { border-left-color: var(--color-text-muted, #64748b); } /* --- rejilla de superficies (vinilos, lonas) ------------------------- */ .srg-sup-grid { display: grid; gap: var(--space-md, 1rem); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .srg-sup-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; margin-bottom: .5rem; } .srg-sup-total { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; margin-top: .2rem; border-top: 1px dashed var(--color-border, #334155); } /* --- avisos ---------------------------------------------------------- */ /* No son decorativos: son la diferencia entre que un articulo sin tarifa se cobre a PVP en silencio y que el comercial lo vea. */ .srg-avisos { margin-top: .6rem; } .srg-aviso { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--font-size-sm, .875rem); line-height: 1.5; padding: .5rem .6rem; margin-bottom: .3rem; border-radius: var(--radius-md, .5rem); background: color-mix(in srgb, var(--srg-warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--srg-warning) 35%, transparent); } .srg-aviso-ico { flex: 0 0 auto; color: var(--srg-warning); } /* El texto se come el ancho para que el aspa quede pegada a la derecha. */ .srg-aviso-txt { flex: 1 1 auto; min-width: 0; } /* Aspa de descartar. Un aviso ya leido y resuelto no debe seguir ocupando pantalla: son informativos, no bloqueantes. */ .srg-aviso-x { flex: 0 0 auto; background: transparent; border: none; cursor: pointer; color: var(--color-text-muted, #64748b); font-family: inherit; font-size: var(--font-size-sm, .875rem); line-height: 1; padding: .15rem .35rem; border-radius: var(--radius-sm, .25rem); transition: var(--transition, all .18s ease); } .srg-aviso-x:hover { color: var(--color-text-primary, #f1f5f9); background: var(--color-bg-hover, #334155); } /* Volver a mostrar los descartados: discreto, pero no escondido. */ .srg-avisos-ver { background: transparent; border: 1px dashed var(--color-border, #334155); color: var(--color-text-muted, #64748b); cursor: pointer; font-family: inherit; font-size: var(--font-size-sm, .875rem); padding: .3rem .7rem; border-radius: var(--radius-md, .5rem); } .srg-avisos-ver:hover { color: var(--color-text-primary, #f1f5f9); border-color: var(--color-accent, #6366f1); } /* --- desglose y comparativa (panel lateral desplegable) -------------- */ .srg-desglose { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs, .75rem); } .srg-desglose th { text-align: left; font-weight: 600; padding: .3rem .35rem; color: var(--color-text-muted, #64748b); border-bottom: 1px solid var(--color-border, #334155); } .srg-desglose td { padding: .3rem .35rem; border-bottom: 1px solid var(--color-border, #334155); } .srg-desglose .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .srg-desglose tr:last-child td { border-bottom: none; } .srg-sec-row td { background: var(--color-bg-hover, #334155); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; color: var(--color-text-muted, #64748b); } /* De donde salio el precio. Ver "PVP" es informacion: significa que no se aplico ninguna escala por volumen. */ .srg-fuente { font-size: 9px; padding: 0 .3rem; border-radius: 999px; border: 1px solid var(--color-border, #334155); color: var(--color-text-muted, #64748b); white-space: nowrap; } .srg-fuente-VOLUMEN { color: var(--srg-success); border-color: var(--srg-success); } .srg-fuente-CLIENTE { color: var(--color-accent, #6366f1); border-color: var(--color-accent, #6366f1); } .srg-fuente-OFERTA { color: var(--srg-warning); border-color: var(--srg-warning); } /* MANUAL es el unico precio que NO sale de una tarifa: lo ha puesto una persona. Se pinta relleno, no solo con el borde, porque es la diferencia entre "el sistema calculo esto" y "alguien decidio esto", y quien revisa el presupuesto tiene que verlo sin buscarlo. PVP faltaba: sin regla propia caia al gris de .srg-fuente, que es legible pero no distingue "no se aplico ningun tramo" de un badge apagado. */ .srg-fuente-MANUAL { color: #fff; font-weight: 700; background: var(--srg-warning); border-color: var(--srg-warning); } .srg-fuente-PVP { color: var(--color-text-muted, #64748b); } .srg-comp { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, .875rem); } .srg-comp th { text-align: right; font-size: var(--font-size-xs, .75rem); color: var(--color-text-muted, #64748b); padding: .3rem .4rem; border-bottom: 1px solid var(--color-border, #334155); } .srg-comp th:first-child, .srg-comp td:first-child { text-align: left; } .srg-comp td { padding: .35rem .4rem; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--color-border, #334155); } .srg-comp tr.is-actual td { background: var(--color-accent-subtle, rgba(99,102,241,.15)); font-weight: 600; } .srg-comp tr:last-child td { border-bottom: none; } .srg-comp .is-mejor { color: var(--srg-success); font-weight: 700; } /* --- estados --------------------------------------------------------- */ .srg-empty { text-align: center; padding: 1.6rem 1rem; color: var(--color-text-muted, #64748b); font-size: var(--font-size-base, 1rem); } .srg-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; } .srg-muted { color: var(--color-text-muted, #64748b); } /* --- SmartList (selector-buscador de prenda) ------------------------- Cuelga de document.body y es