/*
 * v23 · El avance de una solicitud: quién firmó, qué se pidió y cuánto hay.
 */

/* --- Quién autoriza --- */
.flujo-firmas{margin:14px 0 0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f4f8f9)}
.flujo-firmas-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.flujo-firmas-head b{color:var(--ink);font-size:12.5px}
.flujo-firmas-head small{color:var(--muted);font-size:11px;font-weight:700}
.flujo-firmas ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.flujo-firmas li{display:flex;align-items:flex-start;gap:9px}
.flujo-firmas li b{display:block;color:var(--ink);font-size:12.5px}
.flujo-firmas li small{display:block;margin-top:1px;color:var(--muted);font-size:11px}
.flujo-firmas li em{display:block;margin-top:3px;padding-left:8px;border-left:2px solid var(--line);color:var(--muted);font-size:11px}
.firma-marca{
	flex:0 0 auto;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
	background:rgba(109,129,139,.16);color:var(--muted);font-size:12px;font-weight:800;line-height:1;
}
.flujo-firmas li.approved .firma-marca{background:#dff0e7;color:#18684a}
.flujo-firmas li.rejected .firma-marca{background:#fdf1f0;color:#b3261e}
.flujo-firmas li.approved b{color:#18684a}
.flujo-vacio{margin:0;color:var(--muted);font-size:11.5px}

/* --- Los productos, con lo que hay en bodega --- */
.flujo-productos{display:grid;gap:9px;margin-top:12px}
.flujo-producto{
	display:flex;align-items:flex-start;gap:11px;padding:11px 12px;
	border:1px solid var(--line);border-radius:11px;background:var(--surface,#fff);
}
.flujo-producto>div{flex:1;min-width:0}
.flujo-producto b{display:block;color:var(--ink);font-size:13px}
.flujo-producto small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.flujo-producto small b{display:inline;font-size:11.5px}
.existencia{
	flex:0 0 auto;min-width:92px;padding:7px 10px;border-radius:9px;text-align:right;
	background:var(--soft,#f4f8f9);
}
.existencia b{display:block;color:var(--ink);font-size:13px}
.existencia small{display:block;margin-top:1px;color:var(--muted);font-size:10px;line-height:1.3}
.existencia.ok{background:#e9f6ee}
.existencia.ok b{color:#18684a}
.existencia.baja{background:#fff5df}
.existencia.baja b{color:#946318}
.existencia.critica{background:#fdf1f0}
.existencia.critica b{color:#b3261e}
.existencia.sin b{color:var(--muted)}

/* --- Cómo se compró --- */
.flujo-compra{
	margin-top:12px;padding:12px 14px;border-left:4px solid var(--blue,#087db8);
	border-radius:0 11px 11px 0;background:#eef6fc;
}
.flujo-compra b{display:block;color:#0a5f9e;font-size:11px;font-weight:850;letter-spacing:.5px;text-transform:uppercase}
.flujo-compra small{display:block;margin-top:4px;color:var(--ink);font-size:12.5px}
.flujo-compra em{display:block;margin-top:4px;color:var(--muted);font-size:11.5px}

/* --- Lo que le toca a quien está mirando --- */
.flujo-acciones{
	margin-top:13px;padding:12px 14px;border:1px solid #e0a83a;border-radius:11px;background:#fff6e4;
}
.flujo-acciones>b{display:block;margin-bottom:8px;color:#946318;font-size:11px;font-weight:850;letter-spacing:.5px;text-transform:uppercase}
.flujo-acciones .approval-actions{margin:0}

.flow-panel .compra-form,.flow-panel .receipt-form{margin-top:13px}

@media(max-width:620px){
	.flujo-producto{flex-wrap:wrap}
	.existencia{min-width:0;width:100%;text-align:left}
}

/* --- Ver la contraseña --- */
.campo-clave-caja{position:relative;display:block}
.campo-clave-caja input{width:100%;padding-right:46px!important}
.ver-clave{
	position:absolute;top:50%;right:6px;transform:translateY(-50%);
	display:grid;place-items:center;width:34px;height:34px;padding:0;
	border:0;border-radius:8px;background:transparent;color:var(--muted,#6d818b);cursor:pointer;
}
.ver-clave:hover{background:rgba(8,125,184,.09);color:var(--blue,#087db8)}
.ver-clave:focus-visible{outline:2px solid var(--blue,#087db8);outline-offset:1px}
.ver-clave svg{width:19px;height:19px}
.ver-clave[aria-pressed="true"]{color:var(--blue,#087db8)}
.flujo-factura{margin-top:3px!important;color:var(--muted)}
.flujo-factura b{color:var(--ink)}
.receipt-form.compra-form .wide{grid-column:1/-1}

/* --- Compra en varios lugares: una factura cubre varios productos --- */
.compra-desglose{display:grid;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:10px;background:var(--surface,#fff)}
.compra-grupo{margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--soft,#f4f8f9)}
.compra-grupo+.compra-grupo,[data-compras]>div+div .compra-grupo{margin-top:10px}
.compra-grupo legend{padding:0 6px;color:var(--ink);font-size:11.5px;font-weight:850}
.compra-form .quitar-compra,
.compra-form button.quitar-compra{
	margin-left:7px;padding:1px 8px;border:1px solid var(--line);border-radius:6px;
	background:var(--surface,#fff);color:#b3261e;font-size:14px;font-weight:700;line-height:1.3;
	cursor:pointer;box-shadow:none;
}
.compra-form .quitar-compra:hover{border-color:#b3261e}
.compra-grupo-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.compra-grupo-productos{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.compra-grupo-productos>small{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:750}
.compra-form .compra-grupo-productos .check{
	display:flex;align-items:center;gap:8px;margin-bottom:6px;
	color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;
}
.compra-form .compra-grupo-productos .check input{width:auto;margin:0;flex:0 0 auto}
.compra-form .compra-grupo-productos .check small{color:var(--muted);font-weight:600}
.compra-form .agregar-compra{
	justify-self:start;padding:8px 13px;border:1px solid var(--blue,#087db8);border-radius:8px;
	background:transparent;color:var(--blue,#087db8);font-size:12px;font-weight:800;cursor:pointer;
}
@media(max-width:760px){.compra-grupo-datos{grid-template-columns:1fr}}

/* Las compras ya hechas, en el panel de avance */
.flujo-compras{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.flujo-compras li{padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.72)}
.flujo-compras b{display:block;color:var(--ink);font-size:12.5px}
.flujo-compras small{display:block;margin-top:1px;color:var(--muted);font-size:11.5px}
.flujo-compras em{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-style:italic}

/* --- Lo que faltó --- */
.item-falta{color:#b3261e!important;font-weight:700}
.item-compra{color:var(--muted)}
.item-compra b{color:var(--ink)}
.flujo-faltantes{
	margin-top:13px;padding:13px 15px;border:1px solid #e0a83a;border-radius:11px;background:#fff6e4;
}
.flujo-faltantes>b{display:block;color:#946318;font-size:11px;font-weight:850;letter-spacing:.5px;text-transform:uppercase}
.flujo-faltantes>small{display:block;margin-top:4px;color:var(--ink);font-size:12.5px}
.flujo-faltantes p{margin:9px 0 0;font-size:12.5px}
.flujo-faltantes form{margin-top:10px}
.flujo-faltantes button{
	padding:10px 16px;border:0;border-radius:9px;
	background:linear-gradient(135deg,var(--blue,#087db8),var(--cyan,#08adc6));
	color:#fff;font-weight:800;font-size:12.5px;cursor:pointer;
}
.flujo-faltantes form small{display:block;margin-top:7px;color:var(--muted);font-size:11px}
.flujo-lugares{display:block;margin-top:3px;color:var(--muted);font-size:11.5px}